import React from 'react'
import ReactDOM from 'react-dom'

const myCtx = React.createContext()
const {Provider, Consumer} = myCtx

class App extends React.Component{
    state = {
        color: 'red',
        fontSize: '18px'
    }
    render() {
        return (
            <Provider value={{color: this.state.color}}>
                <div>
                    <h1 style={{color:this.state.color}}>App</h1>
                    <hr/>
                    <One/>
                    <button onClick={() => {
                        this.setState({
                            color: 'green'
                        })
                    }}>修改颜色为绿色</button>
                </div>
            </Provider>
        )
    }
}

class One extends React.Component{
    render() {
        return (
            <div>
                <h1>one</h1>
                <hr/>
                <Tow/>
            </div>
        )
    }
}

class Tow extends React.Component{
    render() {
        return (
            <div>
                <h1>Tow</h1>
                <hr/>
                <Three/>
            </div>
        )
    }
}

class Three extends React.Component{
    render() {
        return (
            <Consumer>
                {
                    (data) => {
                        return (
                            <div>
                                <h1 style={{color: data.color}}>Three</h1>
                            </div>
                        )
                    }
                }
            </Consumer>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))